<template>
  <div>
    <el-collapse v-model="active">
      <el-collapse-item title="单选（可直接点文本选择）" name="1">
        <Single />
      </el-collapse-item>
      <el-collapse-item title="多选（可直接点文本选择）" name="2">
        <Multiple />
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script type="text/jsx">
  import EleCascader from '@/components/cascader';

  const options = [{
    value: 'zhinan',
    label: '指南',
    children: [{
      value: 'shejiyuanze',
      label: '设计原则',
      children: [{
        value: 'yizhi',
        label: '一致'
      }, {
        value: 'fankui',
        label: '反馈'
      }, {
        value: 'xiaolv',
        label: '效率'
      }, {
        value: 'kekong',
        label: '可控'
      }]
    }, {
      value: 'daohang',
      label: '导航',
      children: [{
        value: 'cexiangdaohang',
        label: '侧向导航'
      }, {
        value: 'dingbudaohang',
        label: '顶部导航'
      }]
    }]
  }];

  const Single = {
    name: 'cascader-single',
    data () {
      return {value: []}
    },
    render () {
      return (<EleCascader vModel={this.value} props={{options, props:{checkStrictly: true}}} />);
    }
  };

  const Multiple = {
    name: 'cascader-multiple',
    data () {
      return {value: []}
    },
    render () {
      return (<EleCascader vModel={this.value} props={{options, props:{multiple: true, checkStrictly: true}}} />);
    }
  };


  export default {
    name: 'e-cascader',
    components: {Single, Multiple},
    data () {
      return {active: ['1', '2']};
    }
  }
</script>
